<template>
  <div class="contain">
    <div class="contain-box">
      <Blockage :background="bg1" width="370px">
        <template #left>
          <div class="contain-left-num">1648</div>
          <div class="contain-left-people">今日访客数</div>
        </template>
        <template #right>
          <img src="@/assets/logo.png" alt="">
        </template>
      </Blockage>
      <Blockage :background="bg2" width="370px">
        <template #left>
          <div class="contain-left-num">1648</div>
          <div class="contain-left-people">今日访客数</div>
        </template>
        <template #right>
          <img src="@/assets/logo.png" alt="">
        </template>
      </Blockage>
      <Blockage :background="bg3" width="370px">
        <template #left>
          <div class="contain-left-num">1648</div>
          <div class="contain-left-people">今日访客数</div>
        </template>
        <template #right>
          <img src="@/assets/logo.png" alt="">
        </template>
      </Blockage>
    </div>
    <OrderSearch />
    <div class="contain-table">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{background: '#e2ecfb',color:'#000'}"
        :cell-style="cellStyle"
      >
        <el-table-column
          align="center"
          type="index"
          width="100"
          :index="indexMethod"
        />
        <el-table-column
          align="center"
          prop="date"
          label="交易时间"
          width="180"
        />
        <el-table-column
          align="center"
          prop="name"
          label="用户名称"
          width="180"
        />
        <el-table-column
          align="center"
          prop="order"
          label="订单号"
        />
        <el-table-column
          align="center"
          prop="Serial"
          label="交易流水号"
        />
        <el-table-column
          align="center"
          prop="payType"
          label="交易类型"
        />
        <el-table-column
          align="center"
          prop="money"
          label="金额"
        />
      </el-table>
    </div>
    <div style="margin-top:30px">
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage4: 1,
      page: 1,
      tableData: [{
        date: '2016-05-02',
        name: '火星人-tt-one',
        order: '1111111111111111111',
        Serial: '2222222222222222222',
        payType: '付款',
        money: 395.00
      }, {
        date: '2016-05-02',
        name: '火星人-tt-one',
        order: '1111111111111111111',
        Serial: '2222222222222222222',
        payType: '付款',
        money: 395.00
      }, {
        date: '2016-05-02',
        name: '火星人-tt-one',
        order: '1111111111111111111',
        Serial: '2222222222222222222',
        payType: '付款',
        money: 395.00
      }, {
        date: '2016-05-02',
        name: '火星人-tt-one',
        order: '1111111111111111111',
        Serial: '2222222222222222222',
        payType: '付款',
        money: 395.00
      }],
      cellStyle: {
        borderBottom: '2px solid #e2ecfb'
      },
      bg1: 'linear-gradient(90deg, rgba(142, 86, 250, 1) 0%, rgba(142, 86, 250, 1) 0%, rgba(206, 87, 239, 1) 100%, rgba(206, 87, 239, 1) 100%)',
      bg2: 'linear-gradient(90deg, rgba(206, 87, 239, 1) 0%, rgba(206, 87, 239, 1) 0%, rgba(206, 87, 239, 1) 100%, rgba(206, 87, 239, 1) 100%)',
      bg3: 'linear-gradient(90deg, rgba(206, 87, 239, 1) 0%, rgba(206, 87, 239, 1) 0%, rgba(142, 86, 250, 1) 100%, rgba(142, 86, 250, 1) 100%)'
    }
  },
  methods: {
    indexMethod(index) {
      return index + 1 + (this.page - 1) * 10
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.contain{
  margin: 80px 30px;
  &-box{
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 1200px;
  }
  &-table{
    width: 1200px;
  }
  .el-table{
    margin-top: 30px;
    .el-table--border, .el-table--group {
      border: 2px solid #b9d3f7 !important;
    }
  }
}
</style>
